@extends('Admin.layout.layout')
@section('content')
 <!-- 自定义js -->
<script src="{{asset('js/plugins/validate/jquery.validate.min.js')}}"></script>
<script src="{{asset('js/plugins/validate/messages_zh.min.js')}}"></script>
<script src="{{asset('js/plugins/layer/layer.min.js')}}"></script>


<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>店铺等级</h5>
                </div>
                <div class="ibox-content">
                    <table class="table table-striped table-bordered table-hover dataTable" id="editable">
                        <thead>
                            <tr>
                                <th width="15">
                                    <input type="checkbox" class="checkall" name="selectall" />
                                </th>
                                <th>ID</th>
                                <th>文字标识</th>
                                <th>图型标识</th>
                                <th>数字标识</th>
                                <th class="center">成长值</th>
                                <th class="center">备注</th>
                                <th class="center">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="no-records-found center"><td colspan="8">没有找到匹配的记录</td></tr>
                            <tr class="gradeX">
                                <th>
                                    <input type="checkbox" class="checkall" name="checkBox" />
                                </th>
                                <td>1</td>
                                <td>准星级客户</td>
                                <td><span class="glyphicon glyphicon-star-empty c_yellow"></span> </td>
                                <td>LV1</td>
                                <td class="center">0（含）～50</td>
                                <td class="center">默认等级</td>
                                <td class="center">
                                    <a class="btn-xs btn-primary " data-toggle="modal" data-target="#myModal">编辑</a>
                                </td>
                            </tr>
                            <tr class="gradeX">
                                <th>
                                    <input type="checkbox" class="checkall" name="checkBox" />
                                </th>
                                <td>2</td>
                                <td>三星级客户</td>
                                <td>
                                    <span class="glyphicon glyphicon-star c_yellow"></span>
                                    <span class="glyphicon glyphicon-star c_yellow"></span>
                                    <span class="glyphicon glyphicon-star c_yellow"></span>
                                </td>
                                <td>LV2</td>
                                <td class="center">50（含）～500</td>
                                <td class="center">默认等级</td>
                                <td class="center">
                                    <a class="btn-xs btn-primary " data-toggle="modal" data-target="#myModal" data-id="1">编辑</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="dataTables_paginate paging_simple_numbers" id="editable_paginate">
                                <ul class="pagination">
                                    <li class="paginate_button previous" aria-controls="editable" tabindex="0" id="editable_previous">
                                        <a href="#">上一页</a>
                                    </li>
                                    <li class="paginate_button " aria-controls="editable" tabindex="0">
                                        <a href="#">1</a>
                                    </li>
                                    <li class="paginate_button " aria-controls="editable" tabindex="0">
                                        <a href="#">2</a>
                                    </li>
                                    <li class="paginate_button " aria-controls="editable" tabindex="0">
                                        <a href="#">3</a>
                                    </li>
                                    <li class="paginate_button active" aria-controls="editable" tabindex="0">
                                        <a href="#">4</a>
                                    </li>
                                    <li class="paginate_button " aria-controls="editable" tabindex="0">
                                        <a href="#">5</a>
                                    </li>
                                    <li class="paginate_button " aria-controls="editable" tabindex="0">
                                        <a href="#">6</a>
                                    </li>
                                    <li class="paginate_button next" aria-controls="editable" tabindex="0" id="editable_next">
                                        <a href="#">下一页</a>
                                    </li>
                                    <li>&nbsp;&nbsp;共437页，到第&nbsp;&nbsp;<input type="text" class="g-input">&nbsp;页&nbsp;<input type="button" onclick="" value="确定" class="btn btn-sm btn-primary"></input></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    编辑等级
                </h4>
            </div>
            <form class="form-horizontal m-t" id="signupForm">
            <div class="modal-body">
                <div class="form-group">
                    <label class="col-sm-3 control-label">等级标识：</label>
                    <div class="col-sm-4">
                        <input id="writtenWords" name="writtenWords" class="form-control" type="text" placeholder="文字标识">
                    </div>
                    <div class="col-sm-4">
                        <input id="numberWords" name="numberWords" class="form-control" type="text" placeholder="数字标识">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">图片标识：</label>
                    <div class="col-sm-8 align_left" id="picture">
                        <a class="glyphicon glyphicon-star-empty"></a>
                        <a class="glyphicon glyphicon-star-empty"></a>
                        <a class="glyphicon glyphicon-star-empty"></a>
                        <a class="glyphicon glyphicon-star-empty"></a>
                        <a class="glyphicon glyphicon-star-empty"></a>
                        <span class="help-block m-b-none"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">成长值范围：</label>
                    <div class="col-sm-4">
                        <input id="growthlow" name="growthlow" class="form-control" type="text" placeholder="最低（包含）">
                    </div>
                    <div class="col-sm-4">
                        <input id="growthhigh" name="growthhigh" class="form-control" type="text" placeholder="最高">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">备注：</label>
                    <div class="col-sm-8">
                        <input id="remark" name="remark" class="form-control" type="text" aria-required="true" aria-invalid="false" class="valid">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" id="btn_submit">
                    确定
                </button>
                <button type="button" class="btn btn-default"
                        data-dismiss="modal" >取消
                </button>
            </div>
            </form>
        </div>
    </div>
</div>

<script>
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        success: function (element) {
            element.closest('.form-group').removeClass('has-error').addClass('has-success');
        },
        errorElement: "span",
        errorPlacement: function (error, element) {
            if (element.is(":radio") || element.is(":checkbox")) {
                error.appendTo(element.parent().parent().parent());
            } else {
                error.appendTo(element.parent());
            }
        },
        errorClass: "help-block m-b-none",
        validClass: "help-block m-b-none"


    });
    $(document).ready(function () {
        //点击编辑
        $('#myModal').on('show.bs.modal', function (e) {
            edit_id = $(e.relatedTarget).attr("data-id");//编辑时属性的id
            $.ajax({
                url : '',
                type : 'put',
                contentType : "json",
                data : {},
                success : function(data) {
                    if (0 == data.code) {

                    } else {

                    }
                }
            });

        })
        // validate signup form on keyup and submit
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                writtenWords: "required",
                numberWords: "required",
                picture: "required",
                growthlow: "required",
                growthhigh: "required",
                remark: "required"
            },
            messages: {
                writtenWords: icon + "请输入文字标识",
                numberWords: icon + "请输入数字标识",
                picture: icon + "请选择图片标识",
                growthlow: icon + "请输入最低成长值",
                growthhigh: icon + "请输入最高成长值",
                remark: icon + "请输入备注"
            },
            submitHandler:function(form){
                var writtenWords = $('#writtenWords').val();
                var numberWords = $('#numberWords').val();
                var picture = $('#picture').attr('data-rh-score');
                var growthlow = $('#growthlow').val();
                var growthhigh = $('#growthhigh').val();
                var remark = $('#remark').val();
                $.ajax({
                    url : '',
                    type : 'put',
                    contentType : "json",
                    data : {},
                    success : function(data) {
                        if (0 == data.code) {
                            layer.alert(data.message, {
                                icon: 1
                            }, function () {
                                location.reload();
                            });
                        } else {
                            layer.alert(data.message, {
                                icon: 2
                            });
                        }
                    }
                });
            }
        });

        $('#btn_submit').click(function () {
            if(!$('#picture').attr('data-rh-score')){
                setTimeout(function(){
                    $('#picture').parent().addClass('has-error').removeClass('has-success');
                    $('#picture .help-block').show().html('<i class="fa fa-times-circle"></i> 请选择成长值范围');
                }, 100);
            }
        })
        $('#picture').on('mousedown','.glyphicon',function(){
            var score = $(this).index()+1;
            $(this).parent().attr('data-rh-score' ,score);
            $('.glyphicon').addClass('glyphicon-star-empty').removeClass('glyphicon-star');
            $(this).addClass('glyphicon-star').removeClass('glyphicon-star-empty').prevAll('.glyphicon').addClass('glyphicon-star').removeClass('glyphicon-star-empty');
            $('#picture').parent().removeClass('has-error').addClass('has-success');
            $('#picture .help-block').hide().html('');
           /* if($(this).hasClass('glyphicon-star')){
                var score = 0;
                $(this).parent().attr('data-rh-score' ,score);
                $(this).addClass('glyphicon-star-empty').removeClass('glyphicon-star').siblings('.glyphicon').addClass('glyphicon-star-empty').removeClass('glyphicon-star');
            }else{
                var score = $(this).index();
                $(this).parent().attr('data-rh-score' ,score);
                $(this).addClass('glyphicon-star').removeClass('glyphicon-star-empty').prevAll('.glyphicon').addClass('glyphicon-star').removeClass('glyphicon-star-empty');
            }*/
        });

    });
</script>

@endsection